<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            background: #e5f5f2;
        }

        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 2rem auto;
            width: auto;
        }

        .container h1 {
            text-align: center;
            font-size: 2rem;
        }

        .container .content {
            display: flex;
            flex-direction: column;
            padding: 1rem;
            width: 50%;
            font-size: 1.5rem;
            text-align: center;
            border-radius: .3rem;
            justify-content: center;
        }

        .container .content .title {
            display: flex;
            align-items: center;
            margin: 20px;
        }

        .container .content .title .tag {
            padding-right: 20px;
            width: 60px;
        }

        .container .content .lists li {
            float: left;
            padding: 15px;
            list-style: none;
        }

        .container .content li a {
            display: block;
            padding: 10px 20px;
            text-decoration: none;
            color: #3c3c3c;
            border-radius: 5px;
            background-color: #ffffff;
            box-shadow: 0 0 3px#716565;
            transition: all 0.3s ease-in-out;
        }

        .container .content li a:hover {
            transform: scale(1.05);
            color: #f40;
            box-shadow: 0 0 10px #716565;
        }
    </style>
    <title>小demo集合</title>
</head>

<body>
    <div class="container">
        <h1>以前做的小demo整理了一下，感兴趣的可以玩一下！！！</h1>
        <div class="content">
            <div class="gameContent">
                <h4 class="title">
                    <img src="./images/tag.png" alt="标签" class='tag'>
                    游戏区
                </h4>
                <ul class="lists">
                    <li><a href="./demo/lol走位/index.html">LOL走位（canvas版）</a></li>
                    <li><a href="./demo/canvas贪吃蛇/index.html">canvas贪吃蛇</a></li>
                    <li><a href="./demo/jq躲避怪物/index.html">jquery躲避怪物</a></li>
                    <li><a href="./demo/原生js别踩白块/index.html">原生js别踩白块</a></li>
                    <li><a href="./demo/推箱子/index.html">jquery推箱子</a></li>
                    <li><a href="./demo/JS小霸王打字机/index.html">JS小霸王打字机</a></li>
                    <li><a href="./demo/jq全屏弹幕/index.html">jquery全屏弹幕</a></li>
                    <li><a href="./demo/jq躲避小球/index.html">jquery躲避小球</a></li>
                </ul>
            </div>
            <div class="viewContent">
                <h4 class="title">
                    <img src="./images/tag.png" alt="标签" class='tag'>
                    功能特效区
                </h4>
                <ul class="lists">
                    <li><a href="./demo/canvas星星连线/index.html">canvas星星连线</a></li>
                    <li><a href="./demo/canvas实现酷炫时钟/index.html">canvas实现酷炫时钟</a></li>
                    <li><a href="./demo/canvas实现浪漫下雨天/index.html">canvas实现浪漫下雨天</a></li>
                    <li><a href="./demo/jquery的浪漫/index.html">jquery的浪漫</a></li>
                    <li><a href="./demo/js页面实现动态时钟/index.html">js页面实现动态时钟</a></li>
                    <li><a href="./demo/原生js百年日历/index.html">原生js百年日历</a></li>
                    <li><a href="./demo/css3_loading动画/index.html">css3_loading动画</a></li>
                    <li><a href="./demo/歌词随着歌滑动/index.html">jquery歌词随着歌滑动</a></li>
                    <li><a href="./demo/jq世界杯现场滚动抽奖/index.html">jquery世界杯现场滚动抽奖</a></li>
                    <li><a href="./demo/jq构造函数星空特效/index.html">jquery构造函数星空特效</a></li>
                    <li><a href="./demo/js放大镜/index.html">原生js放大镜</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>